<template>
	<view style="display: flex;flex-direction: column;height: 100vh;">
		<u-navbar :placeholder="true" title="微聊" :bgColor="'#e9e9ea'" :autoBack="true"  :border="true"
		 z-index="10076">
			 <view slot="center" style="color: #000;font-size: 30rpx;">
				 新的联系人
			 </view>
		</u-navbar>
		<!-- <view style="padding: 25rpx;" height="50">
			<u-search shape="round" :focus="true" placeholder="用户名/手机号/昵称" actionText="取消" @custom="$u.route({type:'back'})"></u-search>
		</view> -->
		<view style="flex: 1;overflow: hidden;">
			<scroll-view scroll-y="true" style="height: 100%;">
				<view style="">
					<view>
						<!-- <view class="u-border-bottom"
							style="padding-left: 20rpx;font-size: 30rpx;padding-bottom: 15rpx;">联系人</view> -->
						<u-list style="height: auto;">
							<u-list-item v-for="(item, index) in urls" :key="index">
								<u-cell :title="`列表长度-${index + 1}`">
									<view slot="title" style="display: flex;flex-direction: column;">
										<text>xxx</text>
										<text>我是xxxx</text>
									</view>
									<view slot="right-icon" style="display: flex;">
										<u-button type="success" size="mini" :customStyle="{margin:'auto 10rpx',width:'30rpx',}" text="同意"></u-button>
										<text style="font-size: 24rpx;">3月15日12:12:12</text>
									</view>
									<u-avatar slot="icon" shape="square" size="45" :src="item"
										customStyle="margin: -3px 5px -3px 0"></u-avatar>
								</u-cell>
							</u-list-item>
						</u-list>
						<!-- <u-divider style="padding-bottom: 20rpx;" text="联系人"></u-divider> -->
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				urls: [
					'https://cdn.uviewui.com/uview/album/1.jpg',
					'https://cdn.uviewui.com/uview/album/2.jpg',
					'https://cdn.uviewui.com/uview/album/3.jpg',
				],
			};
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	.item {
		width: 750rpx;
		display: flex;
		align-items: center;
		box-sizing: border-box;

		// padding: 20rpx;
		.u-avatar {
			// width: 76rpx;
			// height: 76rpx;
			margin: 0 20rpx;
			border-radius: 12rpx;
			// border: 1px solid #e3e3e3;
			flex: 0 0 76rpx;
		}

		.right {
			// overflow: hidden;
			flex: 1 0;
			padding: 15rpx 20rpx 20rpx 0;

			&_top {
				display: flex;
				justify-content: space-between;

				&_name {
					font-size: 28rpx;
					color: $u-main-color;
					flex: 0 0 450rpx;
					overflow: hidden;
				}

				&_time {
					font-size: 22rpx;
					color: $u-light-color;
				}
			}

			&_btm {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 22rpx;
				color: $u-tips-color;
				padding-top: 10rpx;
			}
		}
	}
</style>
